import React, { useState } from 'react';
import { Space, Card } from 'antd';
import { Radio } from '../index';

const App: React.FC = () => {
  const [normalValue, setNormalValue] = useState<string>('option2');
  const [hoverValue, setHoverValue] = useState<string>('option2');
  const [activeValue, setActiveValue] = useState<string>('option2');

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* Normal 状态 */}
      <Card title="Normal（正常状态）" size="small">
        <Radio.Group value={normalValue} onChange={(e) => setNormalValue(e.target.value)}>
          <Space>
            <Radio value="option1">未选中项</Radio>
            <Radio value="option2">选中项</Radio>
          </Space>
        </Radio.Group>
      </Card>

      {/* Hover 状态提示 */}
      <Card title="Hover（悬浮状态）" size="small">
        <div style={{ marginBottom: 8, color: '#999', fontSize: 12 }}>
          💡 将鼠标移动到单选框上，查看悬浮效果
        </div>
        <Radio.Group value={hoverValue} onChange={(e) => setHoverValue(e.target.value)}>
          <Space>
            <Radio value="option1">未选悬停项</Radio>
            <Radio value="option2">选中项</Radio>
          </Space>
        </Radio.Group>
      </Card>

      {/* Active 状态提示 */}
      <Card title="Active（激活状态）" size="small">
        <div style={{ marginBottom: 8, color: '#999', fontSize: 12 }}>
          💡 点击单选框时查看激活效果
        </div>
        <Radio.Group value={activeValue} onChange={(e) => setActiveValue(e.target.value)}>
          <Space>
            <Radio value="option1">未选中项</Radio>
            <Radio value="option2">选中项</Radio>
          </Space>
        </Radio.Group>
      </Card>

      {/* Disable 状态 */}
      <Card title="Disabled（禁用状态）" size="small">
        <Radio.Group value="option2" disabled>
          <Space>
            <Radio value="option1">未选失效项</Radio>
            <Radio value="option2">选中失效项</Radio>
          </Space>
        </Radio.Group>
      </Card>
    </Space>
  );
};

export default App;

